<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { DictApi } from '#/api';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { DictResp } from '#/api';

const sys_yes_no = reactive<DictApi.SelectOption[]>([]);
const mes_mainten_type = reactive<DictApi.SelectOption[]>([]);

DictResp(['sys_yes_no', 'mes_client_type']).then((res) => {
  if (res.mes_client_type) {
    mes_mainten_type.push(...res.mes_client_type);
  }
  if (res.sys_yes_no) {
    sys_yes_no.push(...res.sys_yes_no);
  }
});

const switchValue = ref('');
const [BaseForm, baseFormApi] = useVbenForm({
  // wrapperClass: 'grid-cols-2',
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      rules: 'required',
      fieldName: 'clientCode',
      formItemClass: 'w-[300px] ml-[-20px]',
      label: '客户编码',
      componentProps: { placeholder: '请输入客户编码' },
      dependencies: {
        triggerFields: ['switch'],
        trigger(values) {
          values.warehouseCode = switchValue;
        },
      },
    },
    {
      component: 'Input',
      rules: 'required',
      formItemClass: 'w-[430px] mt-[-59px] ml-[440px]',
      componentProps: {
        placeholder: '请输入客户名称',
      },
      fieldName: 'clientName',
      label: '客户名称',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[-20px]',
      componentProps: {
        placeholder: '请输入客户简称',
      },
      fieldName: 'clientNick',
      label: '客户简称',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[280px] mt-[-59px]',
      componentProps: {
        placeholder: '请输入客户英文名称',
      },
      fieldName: 'charge',
      label: '客户英文名称',
    },
    {
      component: 'Select',
      formItemClass: 'w-[310px] ml-[560px] mt-[-59px]',
      componentProps: {
        options: mes_mainten_type,
        placeholder: '请选择客户类型',
      },
      fieldName: 'clientType',
      label: '客户类型',
    },
    {
      component: 'Input',
      formItemClass: ' ml-[-20px]',
      componentProps: {
        placeholder: '',
        class: 'h-[50px]',
      },
      fieldName: 'remark',
      label: '客户简介',
    },
    {
      component: 'Input',
      formItemClass: ' ml-[-20px]',
      componentProps: {
        placeholder: '',
        class: 'h-[50px]',
      },
      fieldName: 'remark',
      label: '客户地址',
    },
    {
      component: 'Input',
      formItemClass: 'w-[420px]',
      componentProps: {
        placeholder: '请输入客户官网地址',
      },
      fieldName: 'charge',
      label: '客户官网地址',
    },
    {
      component: 'Input',
      formItemClass: 'w-[430px] mt-[-59px] ml-[440px]',
      componentProps: {
        placeholder: '请输入客户邮箱地址',
      },
      fieldName: 'charge',
      label: '客户邮箱地址',
    },
    {
      component: 'Input',
      formItemClass: 'w-[420px]',
      componentProps: {
        placeholder: '请输入客户电话',
      },
      fieldName: 'tel',
      label: '客户电话',
    },
    {
      component: 'Input',
      formItemClass: 'w-[430px] mt-[-59px] ml-[440px]',
      componentProps: {
        placeholder: '请输入客户LOGO',
      },
      fieldName: 'charge',
      label: '客户LOGO',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[-20px]',
      componentProps: {
        placeholder: '请输入联系人1',
      },
      fieldName: 'contact1',
      label: '联系人1',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[280px] mt-[-59px]',
      componentProps: {
        placeholder: '请输入联系人1-电话',
      },
      fieldName: 'charge',
      label: '联系人1-电话',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[570px] mt-[-59px]',
      componentProps: {
        placeholder: '请选择联系人1-邮箱',
      },
      fieldName: 'charge',
      label: '联系人1-邮箱',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[-20px]',
      componentProps: {
        placeholder: '请输入联系人2',
      },
      fieldName: 'contact2',
      label: '联系人2',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[280px] mt-[-59px]',
      componentProps: {
        placeholder: '请输入联系人2-电话',
      },
      fieldName: 'charge',
      label: '联系人2-电话',
    },
    {
      component: 'Input',
      formItemClass: 'w-[300px] ml-[570px] mt-[-59px]',
      componentProps: {
        placeholder: '请选择联系人2-邮箱',
      },
      fieldName: 'charge',
      label: '联系人2-邮箱',
    },
    {
      component: 'Input',
      formItemClass: 'w-[450px] ',
      componentProps: {
        placeholder: '请输入统一社会信用代码',
      },
      fieldName: 'workshopName',
      label: '社会信用代码',
    },
    {
      component: 'RadioGroup',
      rules: 'required',
      formItemClass: 'mt-[-59px] ml-[440px]',
      componentProps: {
        allowClear: true,
        options: sys_yes_no,
        placeholder: '是否有效',
      },
      fieldName: 'enableFlag',
      label: '是否有效',
    },
    {
      component: 'Input',
      formItemClass: ' ml-[-20px]',
      componentProps: {
        placeholder: '',
        class: 'h-[80px]',
      },
      fieldName: 'remark',
      label: '备注',
    },
    {
      component: 'Input',
      formItemClass: ' ml-[-100px]',
      fieldName: 'tabsSlot',
      label: '',
    },
  ],
  // wrapperClass: 'grid-cols-1',
});

const data = ref();
const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
      console.log(data.value);
      if (data.value) {
        baseFormApi.setValues(data.value);
      }
    }
  },
});

function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}
const activeTab = ref('product');
</script>

<template>
  <Modal>
    <BaseForm>
      <template #tabsSlot>
        <div
          class="h-[200px] w-full border-[1px] border-[#dee0e6] bg-[#ffffff] shadow-md"
        >
          <div class="flex h-[40px] w-full bg-[#f5f7fa]">
            <div
              @click="activeTab = 'product'"
              class="cursor-pointer p-3 text-[14px]"
              :class="[
                activeTab === 'product'
                  ? 'border-r-[1px] bg-white font-medium text-[#58aeff]'
                  : 'text-[#999999]',
              ]"
            >
              产品清单
            </div>
            <div
              @click="activeTab = 'sales'"
              class="cursor-pointer p-3 text-[14px]"
              :class="[
                activeTab === 'sales'
                  ? 'border-l-[1px] border-r-[1px] bg-white font-medium text-[#58aeff]'
                  : 'text-[#999999]',
              ]"
            >
              销售记录
            </div>
          </div>

          <!-- 产品清单表格 -->
          <div
            v-show="activeTab === 'product'"
            class="m-auto mt-[20px] w-[95%]"
          >
            <table class="w-full text-[14px]">
              <thead>
                <tr
                  class="h-[40px] bg-[#fafafa] text-left font-bold text-[#515a6e]"
                >
                  <th class="pl-4">物料编码</th>
                  <th>物料名称</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>入库数量</th>
                  <th>批次号</th>
                </tr>
              </thead>
              <tbody>
                <tr class="h-[40px] border-t-[1px] border-[#f0f0f0]">
                  <td colspan="6" class="text-center text-[#999999]">
                    暂无数据
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 销售记录表格 -->
          <div v-show="activeTab === 'sales'" class="m-auto mt-[20px] w-[95%]">
            <table class="w-full text-[14px]">
              <thead>
                <tr
                  class="h-[40px] bg-[#fafafa] text-left font-bold text-[#515a6e]"
                >
                  <th class="pl-4">出库编码</th>
                  <th>出库单名称</th>
                  <th>销售订单编号</th>
                  <th>客户编码</th>
                  <th>客户名称</th>
                  <th>出库日期</th>
                  <th>单据状态</th>
                </tr>
              </thead>
              <tbody>
                <tr class="h-[40px] border-t-[1px] border-[#f0f0f0]">
                  <td colspan="7" class="mt-2 text-center text-[#999999]">
                    暂无数据
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </template>
    </BaseForm>
  </Modal>
</template>
